<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" :model="q" size="mini" ref="query">
        <el-form-item label="用户ID:" prop="player_id" :rules="[{ required: true, message: '用户ID不能为空'}]">
          <el-input v-model="q.player_id" placeholder="用户ID" prefix-icon="el-icon-edit"></el-input>
        </el-form-item>
        <el-form-item label="问题类型：">
          <el-select v-model="q.reset_type_id" clearable placeholder="请选择">
            <el-option label="所有" :value=null></el-option>
            <el-option v-for="item in problemsTypeList" :key="item.id" :label="item.desc" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <!--<el-button type="danger" @click="reload">重置</el-button>-->
        </el-form-item>
      </el-form>
    </div>
    <el-table class="el-calendar-table" :data="listData.items" v-loading.body="listLoading" size="mini" border
      fit highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column prop="id" label="订单号" width="80">
      </el-table-column>
      <el-table-column prop="player_id" label="用户ID" width="100">
      </el-table-column>
      <el-table-column prop="level" label="用户等级" width="80">
      </el-table-column>
      <el-table-column label="问题详情" min-width="320">
        <template slot-scope="scope">
          <div>提交时间：{{scope.row.created_at}}</div>
          <div>问题类型：{{scope.row.type.desc}}</div>
          <div v-if="scope.row.type.desc === '提现问题' || scope.row.type.desc === '游戏问题' || scope.row.type.desc === '账号问题'  || scope.row.type.desc === '其他问题'">问题分类：{{$store.state.app.questionType[scope.row.question_type]}}</div>
          <div v-if="scope.row.type.desc === '游戏问题'">游戏分类：{{$store.state.app.gameType[scope.row.game]}}</div>
          <div v-if="scope.row.type.desc === '商务合作'">联系方式：{{$store.state.app.contactType[scope.row.cooperation?JSON.parse(scope.row.cooperation).contact_type:'']}}</div>
          <div v-if="scope.row.type.desc === '商务合作'">联系号码：{{scope.row.cooperation?JSON.parse(scope.row.cooperation).contact_account:''}}</div>
          <div v-if="scope.row.type.desc === '提现问题' && $store.state.app.questionType[scope.row.question_type] === '提现未到账'">提现单号：{{scope.row.withdraw_id}}</div>
          <div v-if="scope.row.type.desc === '提现问题' && $store.state.app.questionType[scope.row.question_type] === '提现未到账'">提现时间：{{scope.row.withdraw_at}}</div>
          <div v-if="scope.row.type.desc === '提现问题' && $store.state.app.questionType[scope.row.question_type] === '提现未到账'">提现金额：{{scope.row.amount ? scope.row.amount:0}}</div>
          <div v-if="scope.row.type.desc === '提现问题' && $store.state.app.questionType[scope.row.question_type] === '提现未到账'&& scope.row.desc">
            <span>补充说明：</span>
            <span v-html="scope.row.desc.replace(/\n/g,'<br/>').replace(/\s/g,'&nbsp;')"></span>
          </div>
          <div v-if="scope.row.type.desc !== '充值问题' && scope.row.type.desc !== '商务合作'&& scope.row.type.desc !== '提现问题'">
            <span>问题详细描述：</span>
            <span v-html="scope.row.desc.replace(/\n/g,'<br/>').replace(/\s/g,'&nbsp;')"></span>
          </div>
          <div v-if="scope.row.type.desc !== '充值问题' && scope.row.type.desc !== '商务合作' && !($store.state.app.questionType[scope.row.question_type] === '建议') && scope.row.appear_at">问题出现具体时间：{{scope.row.appear_at}}</div>
          <div v-if="scope.row.type.desc === '充值问题'">充值单号：{{scope.row.pay_id}}</div>
          <div v-if="scope.row.type.desc === '充值问题'">付款时间：{{scope.row.pay_at}}</div>
          <div v-if="scope.row.type.desc === '充值问题'">充值金额：{{scope.row.amount ? scope.row.amount:0}}</div>
          <div v-if="scope.row.type.desc === '充值问题'">支付类型：{{$store.state.app.pay_type[scope.row.pay_type]}}</div>
          <div v-if="scope.row.type.desc === '充值问题'">付款姓名：{{scope.row.pay_name}}</div>
          <!-- <div v-if="scope.row.type.desc === '商务合作'">商务合作</div> -->
          <div v-if="scope.row.type.desc === '商务合作'">您拥有的资源：{{JSON.parse(scope.row.cooperation).source_desc}}</div>
          <div v-if="scope.row.type.desc === '商务合作'">之前是否有棋牌推广经验：{{JSON.parse(scope.row.cooperation).is_veteran===1? '是':'否'}}</div>
          <div v-if="scope.row.type.desc === '商务合作'">当前是否拥有下级团队：{{JSON.parse(scope.row.cooperation).with_lower===1? '是':'否'}}</div>
          <div v-if="scope.row.type.desc === '商务合作'">下级团队人数：{{$store.state.app.proSubordinateTeamNum_[JSON.parse(scope.row.cooperation).lower_count]}}</div>
          <div v-if="scope.row.type.desc === '商务合作'">预计每天可带来多少新用户：{{$store.state.app.propNewUser_[JSON.parse(scope.row.cooperation).daily_new]}}</div>
        </template>
      </el-table-column>
      <el-table-column min-width="140" label="凭证">
        <template slot-scope="scope">
          <span v-if="scope.row.type.desc !== '商务合作'&&scope.row.images">
            <a v-for="(item, index) in scope.row.images" :href="item" :key="index" target="_blank">
              <img :src="item" style="width: 30px">
            </a>
          </span>
          <span v-if="!scope.row.images">无</span>
        </template>
      </el-table-column>
      <el-table-column min-width="460" label="回复详情">
        <template slot-scope="scope">
          <div v-if="scope.row.finish_at">回复时间：{{scope.row.finish_at}}</div>
          <div v-if="scope.row.response" v-html="scope.row.response.replace(/\n/g,'<br/>').replace(/\s/g,'&nbsp;')"></div>
          <div v-if="scope.row.remark">
            <span>备注：</span>
            <span v-html="scope.row.remark.replace(/\n/g,'<br/>').replace(/\s/g,'&nbsp;')"></span>
          </div>
          <div>操作人：{{scope.row.handler}}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.page_no"
        :page-sizes="$store.state.app.pageSizeArr" :page-size="q.page_size"
        layout="total, sizes, prev, pager, next, jumper" :total="listData.total">
      </el-pagination>
    </div>
    <save-update v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id" :problemsTypeList="problemsTypeList">
    </save-update>
  </div>
</template>

<script>
import { getWorkOrderQuery, getProblemsList } from '@/api'
import saveUpdate from '../workOrder/saveUpdate'
import { queryFilter } from '@/utils/patch'


export default {
  name: "index",
  components: { saveUpdate},
  data () {
    return {
      show_id: null,
      listData: {},
      // q: { page_size: 30, page_no: 1, pro_id: this.$store.state.user.userinfo.pro_id },
      q: {page_size: 10, page_no: 1},
      listLoading: false,
      showUpdate: false,
      problemsTypeList: [],
      Timetype: true,
      working: true,
      showTransfer: false,
      typeId: 0,
      handlerId: 0,
      uploadData: {},
      cooperation: {}
    }
  },
  created () {
    this.getProblemsList();
  },
  methods: {

    getProblemsList () {
      getProblemsList().then(res => {
        if (res.status === 0) {
          this.problemsTypeList = res.data.items
        }
      })
    },
    receiptWork (val) {
      //通过val值判断点击的是工作还是停止
      //如果是工作，working改为true。否则为false
      if (val === 'work') {
        this.working = true
      } else {
        this.working = false
      }
    },
    Details (row) {
      this.show_id = row.id
      this.showUpdate = true
    },
    sendMsg () {

    },
    query () {
      this.q = Object.assign(this.q, { page_no: 1, page_size: 10 })
      this.getList()
    },
    reload () {
      this.q = { page_no: 1, page_size: 10 }
      this.getList()
    },
    handleSizeChange (val) {
      this.q.page_size = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.q.page_no = val
      this.getList()
    },
    getList () {
      this.$refs.query.validate(valid => {
        if (valid) {
          let queryObj = queryFilter(this.q)
          this.listLoading = true
          getWorkOrderQuery(queryObj).then(res => {
            console.log(res,'---09')
            if (res.status === 0) {
              let m = new Set()
              this.listLoading = false
              this.listData = res.data
              res.data.items.forEach(item => {
                m.add(item.handler)
              })
            }
          })
        }
      })
    },
    handleSelectionChange (sel) {
      console.log(sel)
    }
  },
  watch: {
    showUpdate () {
      if(this.showUpdate!==0&&!this.showUpdate){
        this.getList()
      }
    },
    showTransfer () {
      if (!this.showTransfer) {
        this.getList()
      }
    }
  }
}
</script>

<style scoped>
.el-form-item__label {
  width: 100px !important;
}
</style>
